<div class="mdui-card-header">
    <select class="mdui-select" mdui-select id="netWorkName" title="选择网卡设备">
        <#list networks?keys as key>
            <option value="${key}">${key}</option>
        </#list>
    </select>

    <button type="button" <#if status> style="display: block" <#else> style="display: none"</#if> id="stopBtn" class="ml10 mdui-btn mdui-btn-raised mdui-btn-dense mdui-btn-icon" title="结束抓包" onclick="stopBiz()"> <i class="mdui-icon material-icons">&#xe047;</i></button>
    <button type="button" id="startBtn" <#if status> style="display: none" <#else> style="display: block"  </#if> class="ml10 mdui-btn mdui-btn-raised mdui-btn-dense mdui-btn-icon" title="开始抓包" onclick="startBiz()"><i class="mdui-icon material-icons">&#xe037;</i></button>

</div>

<div class="mdui-card-content">
    <form id="queryForm">
        <input type="hidden" name="currentPage" id="currentPage" value="${currentPage!?c}">
        <div class="layui-inline" style="margin-left: -30px">
            <label class="layui-form-label">起始时间</label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="OFF" class="layui-input" name="startTime" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss" value="${(query.startTime)!}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">截止时间</label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="OFF" class="layui-input" name="endTime" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss" value="${(query.endTime)!}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">源地址</label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="OFF" class="layui-input" name="startIp" value="${(query.startIp)!}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">目标地址</label>
            <div class="layui-input-inline">
                <input type="text" autocomplete="OFF" class="layui-input" name="endIp" value="${(query.endIp)!}">
            </div>
        </div>
        <button type="button" id="queryBtn" class="ml10 mdui-btn mdui-btn-raised mdui-btn-dense mdui-btn-icon" title="搜索" onclick="query()"><i class="mdui-icon material-icons">&#xe8b6;</i></button>
    </form>
    <#if page?? && page.records?? && (page.records?size > 0)>
        <div class="mdui-table-fluid" style="margin-top: 20px">
            <table class="mdui-table">
                <thead>
                <tr>
                    <th>记录时间</th>
                    <th>协议类型</th>
                    <th>源地址</th>
                    <th>源端口</th>
                    <th>目标地址</th>
                    <th>目标端口</th>
                </tr>
                </thead>
                <tbody>
                <#list page.records as obj>
                    <tr title= "数据包内容：${obj.content!?html}">
                        <td>${obj.createTime!?string('yyyy-MM-dd HH:mm:ss')}</td>
                        <td>${obj.protocol!}</td>
                        <td>${obj.startIp!}</td>
                        <td>${obj.startPort!}</td>
                        <td>${obj.toIp!}</td>
                        <td>${obj.toPort!}</td>
                    </tr>
                </#list>
                </tbody>
        </table>
        <div id="pageBar"></div>共${page.total?c}条数据
        <script>
            layui.use(['laypage'], function() {
                    var laypage = layui.laypage
                    //总页数大于页码总数
                    laypage.render({
                        elem: 'pageBar'
                        ,count: ${page.total?c} //数据总数
                        ,skip:true
                        ,curr:${page.current?c}
                        , jump: function (obj,first) {
                            if(!first){
                                $("#currentPage").val(obj.curr);
                                query();
                            }
                        }
                    });
                }
            );
        </script>
        </div>
    <#else>
        <b>暂无数据</b>
    </#if>
</div>

<script>
    layui.use(['laydate'], function() {
            var laydate = layui.laydate;
            //开始时间
            laydate.render({
                elem: '#startTime'
                ,type: 'datetime'
            });
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });

        }
    );
    function query() {
        loadPost("flow/ctrl", $("#queryForm").serialize(), "#myContent", true);
    }
    
    function startBiz() {
        var netWorkName = $("#netWorkName").val();
        if(netWorkName == null || netWorkName == ''){
            alert("请选择网卡设备");
            return;
        }
        $("#startBtn").hide();
        $.ajax({
            url:"flow/start",
            data:'netWorkName='+netWorkName,
            sync:false,
            dataType:'json',
            success:function (res) {
                $("#stopBtn").show();
            },
            error:function () {
                alert("启动失败");
                $("#startBtn").show();
            }
        });
    }
    
    function stopBiz() {
        $("#stopBtn").hide();
        $.ajax({
            url:"flow/stop",
            sync:false,
            dataType:'json',
            success:function (res) {
                $("#startBtn").show();
            },
            error:function () {
                alert("终止失败");
                $("#stopBtn").show();
            }
        });


    }
</script>
